<script setup lang='ts'>
import { ref } from 'vue';
// 分页代码
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);


const border = ref(true);

const value = ref('');
const options = [
    {
        value: 'Option1',
        label: '无数据'
    }
];


import { checkTreeHoleList, getTreeHoleList, serachTreeHole } from '@/api/axios/treeHoleAxios';

// 查看树洞列表


let tableData = ref([]);

// 查看树洞详情
let tableDetails = ref<any>({});
const dialogVisible = ref(false);
const checkDetail = (row: any) => {
    dialogVisible.value = true;
    checkTreeHoleList(row.id).then(res => {
        console.log(res.data);
        tableDetails.value = res.data;
    });
};


// 搜索
const data = ref({
    className: '',
    pageNum: '1',
    pageSize: '10',
    studentId: '',
    studentName: '',
    title: '',
    stuNum: ''
});

function initData() {
    // getTreeHoleList(pageNum.value,pageSize.value).then(res =>{
    //     // console.log(res);
    //     tableData.value = res.rows;
    //     total.value = res.total
    //     // tableDate
    // });

    serachTreeHole(data.value).then(res => {
        console.log(res);
        tableData.value = res.rows;
        total.value = res.total;
    });
}

initData();

function serach() {
    console.log(data.value);
    serachTreeHole(data.value).then(res => {
        console.log(res);
        tableData.value = res.rows;
        total.value = res.total;
    });
}

const onPageChange = (e) => {
    data.value.pageNum = e;
    initData();
};

function reset() {
    data.value = {
        className: '',
        pageNum: '1',
        pageSize: '10',
        studentId: '',
        studentName: '',
        title: '',
        stuNum: ''
    };
    initData();
}
</script>

<template>
    <div>
        <div>
            <ul class='gap-4 mb-4 items-center stuForm'>
                <li>
                    <!--            标题-->
                    <span style='margin-right: 15px;font-size: 14px;'><b>标题信息</b></span>
                    <el-input
                        v-model='data.title'
                        style='width: 158px;'
                        size='large'
                        placeholder='请输入标题'
                    />
                </li>
                <li>
                    <!--            年级-->
                    <span style='margin-right: 15px;font-size: 14px;'><b>学生姓名</b></span>
                    <el-input
                        v-model='data.studentName'
                        style='width: 158px;'
                        size='large'
                        placeholder='请输入学生姓名'
                    />
                </li>
                <li>
                    <!--            班级-->
                    <span style='margin-right: 10px;font-size: 14px;'><b>班级</b></span>
                    <el-select
                        v-model='value'
                        placeholder='请选择班级'
                        size='large'
                        style='width: 158px;'
                    >
                        <el-option
                            v-for='item in options'
                            :key='item.value'
                            :label='item.label'
                            :value='item.value'
                        />
                    </el-select>
                </li>
                <li>
                    <!--            学号-->
                    <span style='margin-right: 15px;font-size: 14px;'><b>学号</b></span>
                    <el-input
                        v-model='data.stuNum'
                        style='width: 158px;'
                        size='large'
                        placeholder='请输入学号'
                    />
                </li>
                <li style='margin-left: 50px;'>
                    <el-button size='large' @click='reset'>重置</el-button>
                    <el-button type='primary' size='large' @click='serach'>搜索</el-button>
                </li>
            </ul>
            <div>
                <el-table :data='tableData' style='width: 95%;margin: 0 auto' :border=border max-height='583px'>
                    <el-table-column fixed type='index' index='index' label='序号' width='80' align='center' />
                    <el-table-column prop='title' label='标题信息' align='center' />
                    <el-table-column prop='studentName' label='姓名' align='center' width='80' />
                    <el-table-column prop='className' label='班级' width='180' align='center' />
                    <el-table-column prop='stuNum' label='学号' width='110' align='center' class='stuNum' />

                    <el-table-column prop='updateTime' label='发布时间' align='center' />
                    <el-table-column fixed='right' label='操作' width='200' align='center'>
                        <template v-slot='scope'>
                            <el-button link type='primary' size='small' style='font-size: 13px'
                                       @click='checkDetail(scope.row)'>查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class='pageNum'>
                <!--pageNum \ pageSize \ total -->
                <el-pagination background layout='prev, pager, next' :total='total'
                               v-model:page-size='pageSize' v-model:current-page='pageNum'
                               @currentChange='onPageChange'
                />
            </div>
        </div>

        <el-dialog
            v-model='dialogVisible'
            title='详细信息'
            width='920'
        >
            <div>
                <p class='times'>{{ tableDetails.createTime }}</p>
                <div class='details'>
                    <p style='margin-bottom: 20px;font-size: 16px'><b>{{ tableDetails.title }}</b></p>
                    <p style='font-size: 14px'>{{ tableDetails.content }}</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<style lang='scss'>
.gap-4 {
    padding: 26px 25px;
    width: 100%;
    margin-left: 20px;
}

.stuForm {
    display: flex;
    flex-wrap: wrap;

    li {
        margin-right: 20px;
    }
}

div.cell {
    height: 36px;
    font-size: 14px;
    line-height: 36px;
    padding: 9px 0 !important;
}

.pageNum {
    margin-top: 25px;
    float: right;
    margin-right: 50px;
}

.el-table_1_column_5 {
    .cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 8px 15px !important;
    }
}

.el-dialog__header {
    background-color: #1892ff;
    margin-right: 0;

    .el-dialog__title {
        font-size: 18px;
        color: #fff;
    }

    .el-dialog__headerbtn .el-dialog__close {
        color: #fff !important;
    }
}

.times {
    width: 100%;
    text-align: right;
    margin: 0 0 10px;
}

.details {
    width: 100%;
    background-color: #f2f3f4;
    padding: 20px 40px;
}

</style>
